<template>
  <div class="message">
    <div class="navtoggle">
      <el-button
        :class="islog ? 'actived' : ''"
        @click="unreadMessage"
      >
        未读消息
      </el-button>
      <el-button
        :class="islog ? '' : 'actived'"
        @click="readMessage"
      >
        历史消息
      </el-button>
    </div>
    <el-table
      ref="table"
      :data="messageData"
      style="width: 100%"
      :cell-style="columnStyle"
      :height="tableHeight"
    >
      <el-table-column
        prop="dateTime"
        label="时间"
      ></el-table-column>
      <el-table-column
        prop="studentName"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="examinationName"
        label="考试名称"
      ></el-table-column>
      <el-table-column
        prop="messageStatus"
        label="状态"
      >
        <template slot-scope="scope">
          <span
            :style="{ color: scope.row.messageStatus == 0 ? 'red' : 'green' }"
          >
            {{ scope.row.messageStatus == 0 ? "未读" : "已读" }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="equipmentName"
        label="机器"
      ></el-table-column>
      <el-table-column
        prop="message"
        label="消息内容"
      >
      </el-table-column>

      <el-table-column
        v-if="messageStatus == 0"
        fixed="right"
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click.native.prevent="deleteRow(scope.row.informationId)"
          >
            确认
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-sizes="[20, 50, 100, 150]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { messageList, updeteMessage } from "@/api";
export default {
  data() {
    return {
      islog: true,
      messageStatus: 0, // 0未读 1已读
      page: 1,
      limit: 20,
      total:100,
      tableHeight:200,
      messageData: [],
    };
  },
  computed: {
    infoNumber() {
      return this.$store.state.infoNumber;
    },
  },
  mounted() {
    this.queryMessage();
     setTimeout(() => {
        this.tableHeight =
          window.innerHeight - this.$refs.table.$el.offsetTop - 75;
      }, 100);
  },
  methods: {
    queryMessage(
      usersId = localStorage.getItem("usersId"),
      messageStatus = this.messageStatus,
      page = this.page,
      limit = this.limit
    ) {
      messageList({ usersId, messageStatus, page, limit }).then((res) => {
        this.total = res.count;
        this.messageData = res.data;
      });
    },
    columnStyle({ row,columnIndex }) {
      if (columnIndex == 5) {
        if(row.message=="请求上电"){
          return "background:#FEF2E2";
        }else{
          return "background:#e0f7e4";
        }
        
      }
    },
    handleSizeChange(ev){
      this.limit = ev;
      this.queryMessage();
    },
    handleCurrentChange(ev){
       this.page = ev;
      this.queryMessage();
    },
     // 页码切换
    // currentPage4(ev){ 
    //   this.page = ev;
    //   this.queryMessage();
    // },
    deleteRow(inform) {
      this.$confirm(
        "确认后系统将不再进行提示,但可在历史消息中查看! 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          updeteMessage({
            usersId: localStorage.getItem("usersId"),
            informationId: inform,
          }).then((res) => {
            console.log(res);
            if (res.result_code == 200) {
              this.$message.success("消息已读!");
              this.$store.commit("setInfoNumber", this.infoNumber - 1);
              this.queryMessage();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    unreadMessage() {
      this.messageStatus = 0;
      this.queryMessage();
      this.islog = true;
    },
    readMessage() {
      // 已读消息
      this.messageStatus = 1;
      this.queryMessage();
      this.islog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.message {
  text-align: left;
}
.actived {
  background: #02a7f0;
  color: white;
}
.navtoggle {
  margin-bottom: 15px;
  border-bottom: 1px solid #999;
  box-shadow: 0 5px -5px 5px #999;
  padding-bottom: 10px;
}
.el-button {
  border: none;
}
</style>
